<template>
  <div class="" style="height: 100vh;width: 100%;">
    <!-- 顶部导航栏 -->
    <div class="myTop">
      <div @click="backPage" class="inBack">
        <i class="el-icon-back"></i>
        <span class="thenBack">返回课程</span>
      </div>
      <div class="detialIn">
        章节详情
      </div>
      <div class="">

      </div>
    </div>
    <!-- end -->
    <!-- 内容部分 -->
    <div class="myContent">
      <div class="" style="width:370px;">
      </div>
      <!-- 中间视频区域 -->
      <div class="secondContent">
        <div class="inTitle">
          <div class="inMYY">
            {{ dataList[cindex].title }} {{
              dataList[cindex].children ? dataList[cindex].children[chapterIndex].title : ''
            }}
          </div>
          <div class="myNav">
            <div :class="[currin == index ? 'inSNavSe':'inSNav']" v-for="(item,index) in navList"
                 :key="index" @click="tuchNav(index)">
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="" style="height: 32px;background-color: #FFFFFF;margin-top: -16px;">

        </div>
        <!-- 视频播放区域 -->
        <div class="myVideo">
          <videoPlayer ref="videoPlayer" :play_time="play_time" :playStatus="playStatus" :src="palyUrl"
                       @onpause="onpause" @onPlayerPlaying="onPlayerPlaying" @perChapter="perChapter"
                       @nexChapter="nexChapter"></videoPlayer>
        </div>
        <!-- end -->

      </div>
      <!-- end -->
      <!-- 右侧目录 -->
      <div class="inRIghtiN">
        <div class="inrtith">
          目录
        </div>
        <div class="inCatalogue">
          <div class="myinCatalogue" v-for="(item,index) in dataList" :key="index">
            <div class="myTitle">
              {{ item.title }}
            </div>
            <div
              class="smallT"
              v-for="(t,i) in item.children" :key="i" @click="tuchSomallT(index,i)">
              <div class="smallTitlein" :style="chapterIndex === i && cindex === index ?  'color: deepskyblue' : ''">
                {{ i + 1 }} . {{ t.title }}
              </div>
              <div v-if="t.VideoRecord ? t.VideoRecord.is_pass : false " class="">
                <i class="el-icon-check rightInR"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end -->
    </div>
    <!-- end -->

  </div>
</template>

<script>
let _this;
import videoPlayer from './components/videoplear'

export default {
  components: {videoPlayer},
  data() {
    return {
      play_time: 0, //上次观看时间
      isPost: false, //是否正在发请求
      classInfo: null,
      userInfo: null, //用户信息
      playStatus: false, //当前视频默认播放未完成
      palyUrl: '', //当前视频播放地址
      dataList: [],
      cindex: 0, //一级章节下标
      chapterIndex: 0,
      currin: 0,
      catalogueC: 0,
      navList: [{
        name: '视频'
      },
      ],

    }
  },

  methods: {

    getChapterList: function() {
      this.$axios.post('https://vvv.52ecode.cn/api/v1.ClassChapter/index', {
        id: _this.classInfo.id,
        website_id: 1,
        user_id: _this.userInfo.id,
      }).then(res => {
        _this.isPost = false;
        const {data} = res;
        this.dataList = data.data;
        this.playStatus = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord ? this.dataList[this.cindex].children[this.chapterIndex].VideoRecord : ''
        sessionStorage.setItem("chapterList", JSON.stringify(data.data))
      }).catch(err => {
        _this.isPost = false;
      })
    },

    saveProgress: function(e, is_pass) {
      if (e.currenTimer <= 3) return; //小于3秒直接不记录
      _this.isPost = true;
      this.$axios.post("https://vvv.52ecode.cn/api/v1.ChapterRecord/index", {
        website_id: 1,
        class_id: _this.classInfo.id,
        chapter_id: _this.dataList[_this.cindex].children[_this.chapterIndex].id,
        user_id: _this.userInfo.id,
        chapter_name: _this.dataList[_this.cindex].children[_this.chapterIndex].title,
        is_pass: is_pass,
        play_time: e.currenTimer,
      }).then(res => {
        if (is_pass === 1) {
          this.getChapterList();
          return
        }
        _this.isPost = false;

      }).catch(err => {
        _this.isPost = false;
      })
    },
    onpause: function(e) {
      console.log("onpause")
      let is_pass = (e.currenTimer / e.duration).toFixed(2) * 100 >= 90 ? 1 : 0;
      if (!this.isPost) {
        this.saveProgress(e, is_pass);
      }
    },
    onPlayerPlaying: function(e) {
      if (_this.playStatus){
        if (_this.playStatus.is_pass){
          return;
        }
      }
      if (!_this.isPost) {
        _this.saveProgress(e, 1);
      }
    },
    perChapter: function(e) {
      this.dataList = JSON.parse(sessionStorage.getItem("chapterList"));//
      // this.$refs.videoPlayer.playPause();
      let current = this.chapterIndex;
      if (current === 0) {
        let index = this.cindex;
        if (index === 0) return;
        this.cindex--;
        sessionStorage.setItem("chapterIndex", JSON.stringify({index: this.cindex, chapterIndex: this.chapterIndex}))
        this.chapterIndex = this.dataList[this.cindex].children.length - 1;
        this.palyUrl = this.dataList[this.cindex].children[this.chapterIndex].url;
        this.playStatus = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord;
        this.play_time = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord ? this.dataList[this.cindex].children[this.chapterIndex].VideoRecord.play_time : 0;
      } else {
        this.chapterIndex--;
        sessionStorage.setItem("chapterIndex", JSON.stringify({index: this.cindex, chapterIndex: this.chapterIndex}))
        this.palyUrl = this.dataList[this.cindex].children[this.chapterIndex].url;
        this.playStatus = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord;
        this.play_time = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord ? this.dataList[this.cindex].children[this.chapterIndex].VideoRecord.play_time : 0;
      }

    },
    nexChapter: function(e) {
      this.dataList = JSON.parse(sessionStorage.getItem("chapterList"));//获取最新数据，要不无效
      // this.$refs.videoPlayer.playPause();
      let currentLen = this.dataList[this.cindex].children.length - 1;
      let current = this.chapterIndex;
      if (current < currentLen) {
        this.chapterIndex++;
        sessionStorage.setItem("chapterIndex", JSON.stringify({index: this.cindex, chapterIndex: this.chapterIndex}))
        this.palyUrl = this.dataList[this.cindex].children[this.chapterIndex].url;
        this.playStatus = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord;
        this.play_time = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord ? this.dataList[this.cindex].children[this.chapterIndex].VideoRecord.play_time : 0;
      } else {
        let dataLen = this.dataList.length - 1;
        if (this.cindex === dataLen) return;
        this.cindex++;
        sessionStorage.setItem("chapterIndex", JSON.stringify({index: this.cindex, chapterIndex: this.chapterIndex}))
        this.chapterIndex = 0;
        this.palyUrl = this.dataList[this.cindex].children[this.chapterIndex].url;
        this.playStatus = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord;
        this.play_time = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord ? this.dataList[this.cindex].children[this.chapterIndex].VideoRecord.play_time : 0;
      }

    },
    backPage: function() {
      this.$refs.videoPlayer.playPause();
      this.$router.push("chapter")
    },
    tuchNav(index) {
      this.currin = index
      if (this.currin === 0) {
        this.$router.push('videoplear')
      } else if (this.currin === 1) {
        this.$router.push('examTest')
      }
    },
    tuchSomallT(index, i) {
      this.$refs.videoPlayer.saveCurrentPlayTime();
      this.dataList = JSON.parse(sessionStorage.getItem("chapterList"));//获取最新数据，要不无效
      sessionStorage.setItem("chapterIndex", JSON.stringify({index: index, chapterIndex: i}))
      // this.$refs.videoPlayer.playPause();
      this.cindex = index;
      this.chapterIndex = i;
      this.palyUrl = this.dataList[index].children ? this.dataList[index].children[i].url : '';
      this.playStatus = this.dataList[index].children ? this.dataList[index].children[i].VideoRecord : '';
      this.play_time = this.dataList[index].children[i].VideoRecord ? this.dataList[index].children[i].VideoRecord.play_time : 0;

    }
  },
  created() {
    _this = this;
    window.addEventListener('beforeunload', e => {
      this.$refs.videoPlayer.playPause();
    })
    this.userInfo = JSON.parse(sessionStorage.getItem('InfoMation'));
    this.dataList = JSON.parse(sessionStorage.getItem("chapterList"));
    this.classInfo = JSON.parse(sessionStorage.getItem("classInfoV"))
    let cruurent = JSON.parse(sessionStorage.getItem('chapterIndex'))
    this.chapterIndex = cruurent.chapterIndex;
    this.cindex = cruurent.index;
    this.palyUrl = this.dataList[this.cindex].children ? this.dataList[this.cindex].children[this.chapterIndex].url : '';
    this.playStatus = this.dataList[this.cindex].children ? this.dataList[this.cindex].children[this.chapterIndex].VideoRecord : ''
    this.play_time = this.dataList[this.cindex].children[this.chapterIndex].VideoRecord ? this.dataList[this.cindex].children[this.chapterIndex].VideoRecord.play_time : 0;
  },

  beforeDestroy() {
    this.$refs.videoPlayer.playPause();
  }

};
</script>

<style>
.rightInR {
  color: #37deb5;
  font-weight: bold;
}

.smallTitlein {
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.myTitle {
  font-weight: bold;
  padding: 8px 16px;
  letter-spacing: 1pt;
  background-color: #f9fafb;
  cursor: pointer;
  font-size: 16px;
}

.myTitle:hover {
  color: #b2b3b8;
  cursor: pointer;
}

.myinCatalogue {
}

.smallT {
  display: flex;
  padding: 8px 16px;
  cursor: pointer;
}

.smallTinit {
  display: flex;
  background-color: #f0f6ff;
  border-bottom: solid 1px #d6e8ff;
  border-top: solid 1px #d6e8ff;
  padding: 7px 16px;
  cursor: pointer;
}

.smallT:hover {
  background-color: #f9fafb;
}

.inCatalogue {
  margin-top: 16px;
}

.inrtith {
  font-size: 18px;
  padding: 8px 0;
  text-align: center;
  background-color: #f9f9f9;
  color: #c9c9cf;
}

.inRIghtiN {
  background-color: #ffffff;
  width: 370px;
  overflow-y: scroll;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.myVideo {
  margin-top: -16px;
  display: flex;
  flex-direction: column;
  padding-top: 65px;
  background-color: #FFFFFF;
  height: 70vh;
}

.inSNav {
  padding: 8px 30px;
  cursor: pointer;
  color: #b5d3f6;
}

.inSNavSe {
  background-color: #FFFFFF;
  padding: 8px 30px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}

.myNav {
  margin-left: 16px;
  display: flex;
  background-color: #f5f8fb;
}

.inMYY {
  text-align: center;
}

.inTitle {
  padding: 16px 0;
  width: 100%;
  background-color: #f5f8fb;
}

.secondContent {
  width: 930px;
  margin-top: 16px;
}

.myContent {
  display: flex;
  justify-content: space-between;
  width: auto;
  height: 96vh;
  background-color: #eef2f5;
}

.thenBack {
  margin-left: 4px;
}

.inBack {
  cursor: pointer;
}

.detialIn {
  color: #979cac;
  cursor: pointer;
}

.myTop {
  padding: 8px 16px;
  width: auto;
  background-color: #3a4357;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
}
</style>
